<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>18-用CSS画个阳光通透的玻璃房</title>
  <link rel="stylesheet" href="css/18.css">
</head>
<body>
  <!-- 房屋开始 -->
  <div class="house">

    <!-- 整体阴影开始 -->
    <div class="shadows">
      <div class="shadowInner"></div>
    </div>
    <!-- 整体阴影结束 -->

    <!-- 地板主区域开始 -->
    <div class="floorMain cube">
      <div class="floorMain-front face"></div>
      <div class="floorMain-back face"></div>
      <div class="floorMain-left face"></div>
      <div class="floorMain-right face"></div>
      <div class="floorMain-top face"></div>
      <div class="floorMain-bottom face"></div>
    </div>
    <!-- 地板主区域结束 -->

    <!-- 地板右下角开始 -->
    <div class="floorRightDown cube">
      <div class="floorRightDown-front face"></div>
      <div class="floorRightDown-back face"></div>
      <div class="floorRightDown-left face"></div>
      <div class="floorRightDown-right face"></div>
      <div class="floorRightDown-top face"></div>
      <div class="floorRightDown-bottom face"></div>
    </div>
    <!-- 地板右下角结束 -->

    <!-- 地板右上角开始 -->
    <div class="floorRightUp cube">
      <div class="floorRightUp-front face"></div>
      <div class="floorRightUp-back face"></div>
      <div class="floorRightUp-left face"></div>
      <div class="floorRightUp-right face"></div>
      <div class="floorRightUp-top face"></div>
      <div class="floorRightUp-bottom face"></div>
    </div>
    <!-- 地板右上角开始 -->

    <!-- 玻璃地板开始 -->
    <div class="floorGlass cube">
      <div class="floorGlass-front face"></div>
      <div class="floorGlass-back face"></div>
      <div class="floorGlass-left face"></div>
      <div class="floorGlass-right face"></div>
      <div class="floorGlass-top face"></div>
      <div class="floorGlass-bottom face"></div>
    </div>
    <!-- 玻璃地板结束 -->
    
  </div>
  <!-- 房屋结束 -->
</body>
</html>